<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
        list-style-type: none;
    }
    .ct{
        width: 1400px;
        height: 500px;
        background-color: #333;
        cursor:cell;
        display:flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        position: relative;
    }
    .cont {
        position: relative;
        width: 100%;
        height: 100%;
        display:flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        overflow:hidden;
    }

    .cont span{
        position: absolute;
        height: 100%;
        width: 50%;
        display: block;
        transition: all 1s;
    }
    .cont span img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .jiantou{
        position: absolute;
        width: 100%;
        height: 50px;
        top: 50%;
        left: 0px;
        transform: translateY(-25px);
        justify-content: space-between;
        align-items: center;
        display: flex;
        z-index: 999;
    }
    .jiantou span{
        background-color: red;
        padding: 20px;
    }
</style>
<body>
    <div class="ct">
        <div class="cont">
            <span><img src="pexels-photo-17975892.jpeg" alt=""></span>
            <span><img src="pexels-photo-17975892.jpeg" alt=""></span>
            <span><img src="pexels-photo-17975892.jpeg" alt=""></span>
            <span><img src="pexels-photo-17975892.jpeg" alt=""></span>
            <span><img src="pexels-photo-17975892.jpeg" alt=""></span>
            <span><img src="pexels-photo-17975892.jpeg" alt=""></span>
            <span><img src="pexels-photo-17975892.jpeg" alt=""></span>
            <span><img src="pexels-photo-17975892.jpeg" alt=""></span>
            <span><img src="pexels-photo-17975892.jpeg" alt=""></span>
            <span><img src="pexels-photo-17975892.jpeg" alt=""></span>
            <span><img src="pexels-photo-17975892.jpeg" alt=""></span>
       </div>
       <div class="jiantou">
           <span class="prev">prev</span>
           <span class="next">next</span>
       </div>
    </div>
    <script>
        // 1.获取元素
        let imgs = document.querySelectorAll('.cont span');
        //当前显示的图片脚本
        let nowImg =4;
        layout();
        function layout(){
            const offesrstep = 450;
            const count = imgs.length;
            const scalesetp = 0.6;
            for(let i = 0; i < imgs.length; i++){
                const item = imgs[i];
                const xoofset = (i - nowImg) * offesrstep;
                const sale = scalesetp ** Math.abs(i - nowImg);
                const rotateY = i === nowImg ? 0 : 45;
                item.style.transform = `translateX(${xoofset}px) scale(${sale}) rotateY(${rotateY}deg)`;
                item.style.zIndex = count - Math.abs(nowImg - i);
            }
        }
        let prev = document.querySelector('.prev');
        let next = document.querySelector('.next');
        prev.onclick = function(){
            nowImg -- ;
            if(nowImg < 0){
                nowImg = 0;
            }
            layout();
        }
        next.onclick = function(){
            nowImg ++ ;
            if(nowImg > imgs.length){
                nowImg = imgs.length - 1;
            }
            layout();
        }

        imgs.forEach((item,i) =>{
            item.addEventListener('click',function(){
                nowImg = i;
                layout();
            })
        })
        let conts = document.querySelector('.cont');
        conts.onmousedown = function(e){
            //鼠标刚点击的地址 第一次的地址
            let disx = e.clientX;
            let disy = e.clientY;
            document.onmousemove = function(e){
                let x = e.clientX - disx;
                let y = e.clientY - disy;
                console.log(x,y);
                if(x > 50){
                    if(nowImg > imgs.length){
                        nowImg = imgs.length - 1;
                    }else{
                        nowImg = nowImg + 1;
                    }
                }else if(x<50){
                    if(nowImg < 0){
                        nowImg = 0;
                    }else{
                        nowImg = nowImg - 1;
                    }
                }
            }    
        }
        conts.onmouseup = function(){
            document.onmousemove = null;
                layout();
        }
        let timer = setInterval(()=>{
            nowImg++;
            if(nowImg > imgs.length){
                nowImg = 0;
            }
            layout();
        },3000)
    </script>
</body>
</html>